<template>
    <view class="wrap">
        <view class="flex flex-column flex-v-center u-p-t-45 u-p-b-50 top-infos">
            <image :src="vuex_avatarUrl" class="userAvatar u-m-b-24"></image>
            <view class="bold nick-name ">{{ vuex_nickName }}</view>
            <view class="des">
                一共走过
                <span>3</span>
                个城市，云游与你同行
                <span>1</span>
                次
            </view>
            <view class="maps" @click="toggleModeType">
                <image class="map-icon" src="@/pages/minePages/static/footprint/map-icon.png" mode="" v-if="modeType==='list'"></image>
                <image class="map-icon" src="@/pages/minePages/static/footprint/list-icon.png" mode="" v-else></image>
                <view>{{modeType==='list'?'地图模式':'列表模式'}}</view>
            </view>
            <view class="footprint">你的足迹</view>
        </view>
        <!-- 列表模式 -->
        <view class="footprint-content mode-list" v-if="modeType==='list'">
            <view class="list" :style="{ height: listHight }">
                <view class="item" v-for="(item, index) in list" :key="index">
                    <image class="location-image" src="@/pages/minePages/static/footprint/location.png" mode="aspectFill"></image>
                </view>
            </view>
        </view>
        <!-- 地图模式 -->
        <view class="footprint-content mode-map" v-else>
            
        </view>
        <view class="share-tip">你也可以与小伙伴分享你的打卡足迹哦</view>
    </view>
</template>
<script>
export default {
    name: '',
    data() {
        return {
            list: ['', '', '', '', '', '', '', ''],
            modeType: 'list'
        };
    },
    props: {
        name: {
            ype: String,
            default: ''
        }
    },
    computed: {
        listHight() {
            return Math.ceil(this.list.length / 2) * 270 + 'rpx';
        }
    },
    onLoad() {},
    onShow() {},
    methods: {
        toggleModeType() {
            this.modeType = this.modeType === 'map' ? 'list' : 'map';
        }
    },
    watch: {},
    components: {}
};
</script>
<style lang="scss" scoped>
.wrap {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    .top-infos {
        .userAvatar {
            width: 130rpx;
            height: 130rpx;
            border-radius: 100%;
        }
        .maps {
            position: absolute;
            right: 30rpx;
            top: 40rpx;
            display: flex;
            align-items: center;
            font-size: 28rpx;
            line-height: 28rpx;
            .map-icon {
                width: 40rpx;
                height: 38rpx;
                margin-right: 10rpx;
            }
        }
        .des {
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24rpx;
            color: #abb3b8;
            padding-top: 12rpx;
            span {
                font-size: 28rpx;
                color: #08c160;
                padding: 0 8rpx;
                font-weight: bold;
            }
        }
        .footprint {
            display: flex;
            margin-top: 60rpx;
            color: #abb3b8;
            font-size: 22rpx;
            font-style: italic;
            position: relative;
            &::after {
                position: absolute;
                content: '';
                left: 50%;
                top: 50%;
                width: 690rpx;
                height: 42rpx;
                transform: translate(-50%, -50%);
                background: url(@/pages/minePages/static/footprint/line.png);
                background-size: cover;
            }
        }
    }
    .footprint-content{
        padding: 30rpx;
        flex-grow: 2;
    }
    .mode-list {
        overflow-y: scroll;
        .list {
            align-items: flex-start;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }
        .item {
            width: 330rpx;
            height: 240rpx;
            border-radius: 10rpx;
            margin-bottom: 30rpx;
            flex-shrink: 0;
            .location-image {
                width: 100%;
                height: 100%;
                border-radius: 10rpx;
            }
        }
    }

    .share-tip {
        font-size: 26rpx;
        line-height: 26rpx;
        color: #abb3b8;
        padding: 40rpx 0 40rpx;
        display: flex;
        justify-content: center;
    }
}
</style>
